<template>
	<div class="undering">
		<img src="../../phoneImg/bg1.gif" alt="" class="bg">
		<img src="../../phoneImg/deng.png" alt="" class="deng"  v-show="deng">
    <img src="../../phoneImg/主字体.png" alt="" class="typeface" v-show="typeface" >
    <img src="../../phoneImg/灯泡.png" alt="" class="bulb animated flash" v-show="bulb" >
    <img src="../../phoneImg/24小时.png" alt="" :style="isShow" class="twenty animated flash" v-show="twenty" >
    <img src="../../phoneImg/文字1.png" alt="" class="character animated flash" v-show="character" >
		<img src="../../phoneImg/输入字体.png" alt="" :style="isShow" class="writein animated flash" v-show="writein" >
		<img src="../../phoneImg/手机外壳.png" alt="" :style="newStyle" class="shell animated flash" v-show="shell" >
    <img src="../../phoneImg/钻石.png" alt="" class="diamond animated flash" v-show="diamond" >
    <img src="../../phoneImg/冰淇淋.png" alt="" class="ice animated flash" v-show="ice" >
    <img src="../../phoneImg/退出.png" alt="" class="exit animated flash" v-show="exit" >


		<div :style="isShow">
			 <img src="../../phoneImg/输入框.png" alt="" class="field animated flash" v-show="field" >
			 <input type="text" class="enter1" v-show="enter" ref="input1" v-model="modelInput1">
			 <input type="text" class="enter2" v-show="enter" ref="input2" v-model="modelInput2">
			 <input type="text" class="enter3" v-show="enter" ref="input3" v-model="modelInput3">
			 <input type="text" class="enter4" v-show="enter" ref="input4" v-model="modelInput4" >

		</div>

			 <div class="Lotterylist">
                  <div class="listbox">
					  <img src="../../phoneImg/钻石.png" alt="" class="ltypic" >
					  <ul>
						  <li>大吉大利</li>
						  <li>
                            1234567891011121
                          </li>
					  </ul>
                         <img src="../../phoneImg/框.png" alt="" class="restrain" @click="eveal()" v-show="downIcon">
						 <img src="../../phoneImg/勾.png" alt="" class="restrains" @click="eveals()" v-show="!downIcon">
				  </div>    


				     <div class="listbox">
					  <img src="../../phoneImg/钻石.png" alt="" class="ltypic" >
					  <ul>
						  <li>大吉大利</li>
						  <li>
                            1234567891011121
                          </li>
					  </ul>
                         <img src="../../phoneImg/框.png" alt="" class="restrain" @click="eveal()" v-show="downIcon">
						 <img src="../../phoneImg/勾.png" alt="" class="restrains" @click="eveals()" v-show="!downIcon">
				  </div>  


				  <div class="listbox">
					  <img src="../../phoneImg/钻石.png" alt="" class="ltypic" >
					  <ul>
						  <li>大吉大利</li>
						  <li>
                            1234567891011121
                          </li>
					  </ul>
                         <img src="../../phoneImg/框.png" alt="" class="restrain" @click="eveal()" v-show="downIcon">
						 <img src="../../phoneImg/勾.png" alt="" class="restrains" @click="eveals()" v-show="!downIcon">
				  </div>  


				  <div class="listbox">
					  <img src="../../phoneImg/钻石.png" alt="" class="ltypic" >
					  <ul>
						  <li>大吉大利</li>
						  <li>
                            1234567891011121
                          </li>
					  </ul>
                         <img src="../../phoneImg/框.png" alt="" class="restrain" @click="eveal()" v-show="downIcon">
						 <img src="../../phoneImg/勾.png" alt="" class="restrains" @click="eveals()" v-show="!downIcon">
				  </div>  
				    
			 </div>

		<div class="tips" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;padding-top: 500px;text-align: center;z-index: 100;background-color: white;" v-if="load">
			<p class="load" style="">正在加载中，请稍后...</p>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
        newStyle:'',
        isShow:'',
				load: true,
				deng: true,
				typeface:false,
				bulb:false,
				twenty:false,
				character:false,
				writein:false,
				shell:false,
				diamond:false,
				ice:false,
				exit:false,
				field:false,
				enter:false,
				modelInput1: '',
				modelInput2: '',
				modelInput3: '',
				modelInput4: '',
			    downIcon: true
                
			}
		},
		mounted() {
			setTimeout(()=>{
				this.load = false;
				setTimeout(()=>{
					this.deng = false;
				this.typeface = true;
				},1600);
					setTimeout(()=>{
					this.bulb = true;
					this.twenty = true;
				},3200);
						setTimeout(()=>{
					this.character = true;
					this.writein=true
					this.shell=true
				},4600);
						setTimeout(()=>{
					 this.diamond = true;
					 this.ice = true;
					 this.exit = true;
					 this.field = true;
					 this.enter=true
				},6000);
			},3000);
		},
		computed: {

		},
		methods: {
			eveal() {
                        this.downIcon = !this.downIcon
					},
		    eveals() {
                        this.downIcon = true
                    }
		},
	updated(){
			if(this.enter==true){
				this.$refs['input1'].focus();
			}
			if(this.modelInput1.length==1){
				this.$refs['input2'].focus();
			}
			if(this.modelInput2.length==1){
				this.$refs['input3'].focus();
			}
			if(this.modelInput3.length==1){
				this.$refs['input4'].focus();
			}
			if(this.modelInput4.length==1){
				// document.getElementsById("aaa").style.webkitTransition = "3s"
        // alert(1);
        this.newStyle = "animation:xuanzhuan 3s linear 1;animation-fill-mode: forwards;"
        this.isShow = 'display:none'
			}

		},

	}
</script>

<style>
  @keyframes xuanzhuan {
    0%{
      transform: rotate(0deg) translateX(0px) translateY(0px);
    }
    100%{
      transform: rotate(90deg) translateX(230px) translateY(330px);
    }
  }
img{
	display: inline-block;
}
.undering{
	position: relative;
  width:100%;
  height:100vh;
  overflow: hidden;
  -webkit-perspective: 1500px;
          perspective: 1500px;
}

.bg{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	/* animation: bg 0.8s ease-in-out;
	animation-fill-mode: forwards; */
}

.deng{
	position: absolute;
    top: 169px;
    right: 188px;
    left: 189px;
    bottom: 176px;
	/* animation: deng 0.8s ease-in-out;
	animation-fill-mode: forwards; */
}

.typeface{
	width: 865px;
	height: 122px;
	position: absolute;
    top: 418px;
    right: 188px;
    left: 616px;
    bottom: 176px;
	animation: typeface 1s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes typeface{
	from {bottom:100px;}
	to {top:100px;left: 100px;}
}

/* @keyframes fade {
 0%{
		opacity:0.1;
	}
	100%{
		opacity:1;
	}

} */

.bulb{
position: absolute;
width: 265px;
height: 176px;
left: 986px;
top: 80px;
   /* animation: fade 1s infinite 2 normal;
  -webkit-animation: fade 1s infinite 2 normal; */
}

.twenty{
	width: 372px;
	height: 178px;
	position: absolute;
	left: 1348px;
	top: 103px
}

.character{
	width: 665px;
	height: 446px;
	position: absolute;
	left: 81px;
	top: 365px
}

.writein{
	width: 798px;
	height: 123px;
	position: absolute;
	top: 333px;
	right: 120px;
}

.shell{
	width: 855px;
	height: 449px;
	position: absolute;
	top: 485px;
	right: 85px;
  transform-origin: right;
  /*animation: xuanzhuan 3s linear 1;*/
}

	.diamond{
		width: 135px;
		height: 136px;
		position: absolute;
		top: 337px;
		left: 659px;
	}

	.ice{
		width: 118px;
		height: 160px;
		position: absolute;
		top: 607px;
		left:788px;
	}

.exit{
	width: 173px;
	position: absolute;
	top: 23px;
	right: 10px;
}

	.field{
		width: 643px;
		height: 211px;
		position: absolute;
		bottom: 262px;
		right: 190px;
	}
/*
	input{
		position: absolute;
		width: 120px;
		height: 164px;
		float: left;
	} */

	.enter1,.enter2,.enter3,.enter4,.enter5{
	display: block;
	width: 120px;
	height: 164px;
	line-height: 100px;
	text-align: center;
	font-size: 45px;
	outline: none;
	background-color: rgb(255,239,217);
	border: none;
	/*border: 1px solid red;*/
	z-index: 15;
    font-size: 88px;
    font-family: STYuanti-TC-Regular;
    font-weight: 400;
    color: rgba(255,254,254,1);
    line-height: 213px;
	background: none
}

.enter1{
	position: absolute;
	top: 631px;
    left: 423px;
	right: 0;
	margin: auto;
}
.enter2{
	position: absolute;
	top: 631px;
    left: 739px;
	right: 0;
	margin: auto;
}
.enter3{
	position: absolute;
	top: 631px;
    left: 1053px;
	right: 0;
	margin: auto;
}
.enter4{
	position: absolute;
    top: 631px;
    left: 0;
    right: -1370px;
	margin: auto;
}

.Lotterylist{
	
	width: 448px;
	height: 855px;
	/* background: red; */
	position: relative;
    top: 171px;
    right: -1352px;
}
.Lotterylist .listbox{
    width: 306px;
	height: 98px;
	border:7px solid rgba(255,255,255,1);
    border-radius:10px;
    margin-bottom: 32px; 
}
.ltypic{
	width: 88px;
	height: 88px;
	float: left;
}

.listbox ul{
	width: 131px;
	height: 50px;
	list-style: none;
	color: white;
	float: left;
	margin-left: 16px;
	margin-top: 13px
}

.listbox ul li{
	font-size:24px;
	font-family:STYuanti-TC-Bold;
	font-weight:bold;
	color:rgba(255,255,255,1);
	line-height:31px;
	
	}
.listbox ul li:nth-child(2){
	font-size:13px;

}

.restrain{
	float: left;
	width: 24px;
	margin-left: 20px;
	margin-top: 45px
}

.restrains{
	float: left;
	width: 30px;
	margin-left: 20px;
	margin-top: 36px
}
</style>


























